<template>
    <div class="page-header-index-wide">
        <a-row :gutter="24">
            <a-card title="数采中心-数据采集链路图" :headStyle="tstyle">
                <a-col :span="3"></a-col>
                <a-col :span="18">
                    <div style="height: 500px;">
                        <video width="100%" height="100%" autoplay="autoplay" loop>
                            <source src="../../assets/02.mp4" type="video/mp4" loop="loop"/>
                        </video>
                    </div>
                </a-col>
                <a-col :span="3"></a-col>
            </a-card>
        </a-row>
        <a-row :gutter="24">
            <a-card title="数采中心-数据采集与推送滚动看板" :headStyle="tstyle">
                <a-col :span="12">
                    <div style="background-color: #F0F0F0;color: #000;height: 50px;line-height: 50px;text-align: center;">
                        <a-row>
                            <a-col :span="6">单位名称</a-col>
                            <a-col :span="6">种类编码</a-col>
                            <a-col :span="6">订单类型</a-col>
                            <a-col :span="6">订单号</a-col>
                        </a-row>
                    </div>
                    <div class="scroll-wrap">
                        <div v-for="(item,index) in ddtbsjList" :key="item.puid" ref="ddtbsjList"
                             :class="{'animate-up':animateUp}"
                             @mouseenter="StopOne()" @mouseleave="UpOne()" style="text-align: center;">
                            <ul :class="{on:index%2===0,off:index%2!==0}">
                                <a-row>
                                    <li style="line-height: 50px;">
                                        <a-col :span="6" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{ item.supplierCode==='1000015019'?'平高电气':item.supplierCode==='1000014563'?'平芝公司':'' }}
                                        </a-col>
                                        <a-col :span="6" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{ item.subclassCode==='40001'?'组合电器' :item.subclassCode==='40002'?'断路器' :item.subclassCode==='40011'?'隔离开关':'' }}
                                        </a-col>
                                        <a-col :span="6" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{ item.orderType==='1002'?'销售订单' :item.orderType==='1003'?'生产订单':item.orderType==='1004'?'工单':item.orderType==='1005'?'报工信息':'' }}
                                        </a-col>
                                        <a-col :span="6" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{ item.orderNo }}
                                        </a-col>
                                    </li>
                                </a-row>
                            </ul>
                        </div>
                    </div>
                </a-col>
                <a-col :span="12" :headStyle="tstyle">
                    <div style="background-color: #F0F0F0;color: #000;height: 50px;line-height: 50px;text-align: center;">
                        <a-row>
                            <a-col :span="4">单位名称</a-col>
                            <a-col :span="5">种类编码</a-col>
                            <a-col :span="5">订单类型</a-col>
                            <a-col :span="5">订单号</a-col>
                            <a-col :span="5">是否成功</a-col>
                        </a-row>
                    </div>
                    <div class="scroll-wrap">
                        <div v-for="(item,index) in ddtssjList" :key="item.puid" ref="ddtssjList"
                             :class="{'animate-up':animateUp}"
                             @mouseenter="StopTwo()" @mouseleave="UpTwo()" style="text-align: center;">
                            <ul :class="{on:index%2===0,off:index%2!==0}">
                                <a-row>
                                    <li style="line-height: 50px;">
                                        <a-col :span="4" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{ item.supplierCode==='1000015019'?'平高电气':item.supplierCode==='1000014563'?'平芝公司':'' }}
                                        </a-col>
                                        <a-col :span="5" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{ item.subclassCode==='40001'?'组合电器' :item.subclassCode==='40002'?'断路器' :item.subclassCode==='40011'?'隔离开关':''}}
                                        </a-col>
                                        <a-col :span="5" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{item.orderType==='1002'?'销售订单' :item.orderType==='1003'?'生产订单':item.orderType==='1004'?'工单':item.orderType==='1005'?'报工信息':''}}
                                        </a-col>
                                        <a-col :span="5" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{ item.orderNo }}
                                        </a-col>
                                        <a-col :span="5" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                            {{ item.ioflag === '1'?'成功':item.ioflag ==='mod'?'修改':'失败'}}
                                        </a-col>
                                    </li>
                                </a-row>
                            </ul>
                        </div>
                    </div>
                </a-col>
            </a-card>
        </a-row>
        <a-row :gutter="24">
            <a-card title="数采中心-数据概览" :headStyle="tstyle">
        <span slot="extra">
        <a-range-picker @change="onTbChange" style="text-align: center;margin-right: 10px">
          <a-icon slot="suffixIcon" type="smile"/>
        </a-range-picker>
        <a-button @click="tbSearch" icon="search" type="primary">搜索</a-button>
        </span>
                <a-col :span="8">
                    <div id="myChart" style=" width:100%; height: 300px;"></div>
                </a-col>
                <a-col :span="8">
                    <div id="myChart2" style=" width:80%; height: 300px;"></div>
                </a-col>
                <a-col :span="8">
                    <div id="myChart3" style=" width:90%; height: 300px;"></div>
                </a-col>
            </a-card>
        </a-row>
        <a-row :gutter="24" style="margin-top: 15px;">
            <a-card title="数采中心-数据采集及推送信息统计表" :headStyle="tstyle">
        <span slot="extra">
        <a-range-picker @change="onTsChange" style="text-align: center;margin-right: 10px">
          <a-icon slot="suffixIcon" type="smile"/>
        </a-range-picker>
        <a-button @click="tsSearch" icon="search" type="primary">搜索</a-button>
        </span>
                <a-col :span="12">
                    <div id="myChart4" style=" width:80%; height: 300px;"></div>
                    <a-table :columns="sjcjslColumns" :data-source="sjcjslData" bordered :pagination="pagination"/>
                </a-col>
                <a-col :span="12">
                    <div id="myChart5" style=" width:80%; height: 300px;"></div>
                    <a-table :columns="sjtsslColumns" :data-source="sjtsslData" bordered :pagination="pagination"/>
                </a-col>
            </a-card>
        </a-row>
    </div>
</template>

<script>

    import {deleteAction, postAction, getAction, downFile} from '@/api/manage'
    import {JeecgListMixin} from '@/mixins/JeecgListMixin'

    const sjcjslColumns = [
        {
            title: '名称',
            dataIndex: 'name',
            align: 'center',
            scopedSlots: {customRender: 'name'}
        },
        {
            title: '平高电气',
            className: 'column-money',
            align: 'center',
            dataIndex: 'pg'
        },
        {
            title: '平芝',
            align: 'center',
            dataIndex: 'pz'
        }
    ]

    const sjtsslColumns = [
        {
            title: '类型',
            dataIndex: 'name',
            align: 'center',
            scopedSlots: {customRender: 'name'}
        },
        {
            title: '平高电气',
            className: 'column-money',
            align: 'center',
            dataIndex: 'pg'
        },
        {
            title: '平芝',
            align: 'center',
            dataIndex: 'pz'
        }
    ]

    export default {
        mixins: [JeecgListMixin],
        data() {
            return {
                tstyle: {"background-color": "#e6f7ff"},
                // indicator: < a-icon type='loading' style = 'font-size: 24px' spin />,
                sjcjsl: 0,
                gwtssl: 0,
                nwtssl: 0,
                qttssl: 0,
                zhdq: 0,
                cksyb: 0,
                pzgs: 0,
                hgj: 0,
                nzj: 0,
                wzj: 0,
                jxtx: 0,
                ldcjsy: 0,
                gpnssy: 0,
                jbfd: 0,
                supplierCode: 0,
                subclassCode: 0,
                orderType: 0,
                orderNo: 0,
                ioflag: 0,
                sjcjslData: [],
                sjcjslColumns,
                sjtsslData: [],
                sjtsslColumns,
                ddtbsjList: [],
                ddtssjList: [],
                intnum: null,
                intnumTwo: null,
                animateUp: false,
                animateUpTwo: false,
                activeIndex: 0,
                tbStartTime: null,
                tbEndTime: null,
                tsStartTime: null,
                tsEndTime: null,
                loading: true,
                pagination: {hideOnSinglePage: true}
            }
        },
        computed: {
            top() {
                return -this.activeIndex * 50 + 'px'
            }
        },
        destroyed() {
            clearInterval(this.intNum)
        },
        methods: {
            ScrollUpOne() {
                this.intNum = setInterval(() => {
                    this.animateUp = true// 向上滚动的时候需要添加css3过渡动画
                    setTimeout(() => {
                        this.ddtbsjList.push(this.ddtbsjList[0])// 将数组的第一个元素添加到数组的
                        this.ddtbsjList.shift() // 删除数组的第一个元素
                        this.animateUp = false
                    }, 500)
                }, 1000)
            },
            // 鼠标移上去停止
            StopOne() {
                clearInterval(this.intNum)
            },
            // 鼠标离开继续滚动
            UpOne() {
                this.ScrollUpOne()
            },
            ScrollUpTwo() {
                this.intnumTwo = setInterval(() => {
                    this.animateUpTwo = true// 向上滚动的时候需要添加css3过渡动画
                    setTimeout(() => {
                        this.ddtssjList.push(this.ddtssjList[0])// 将数组的第一个元素添加到数组的
                        this.ddtssjList.shift() // 删除数组的第一个元素
                        this.animateUpTwo = false
                    }, 500)
                }, 1000)
            },
            // 鼠标移上去停止
            StopTwo() {
                clearInterval(this.intnumTwo)
            },
            // 鼠标离开继续滚动
            UpTwo() {
                this.ScrollUpTwo()
            },
            onTbChange: function (value, dateString) {
                console.log(dateString[0], dateString[1])
                this.tbStartTime = dateString[0]
                this.tbEndTime = dateString[1]
            },
            tbSearch() {
                let tbStartTime = this.tbStartTime
                let tbEndTime = this.tbEndTime
                let params = {}
                params['startTime'] = tbStartTime
                params['endTime'] = tbEndTime
                getAction('/index/ordersList', params).then(res => {
                    this.drawLine(res.result)
                })
                getAction('/index/cjsjList', params).then((res) => {
                    this.drawLine2(res.result)
                })
                getAction('/index/sysjList', params).then((res) => {
                    this.drawLine3(res.result)
                })
            },
            onTsChange: function (value, dateString) {
                this.tsStartTime = dateString[0]
                this.tsEndTime = dateString[1]
            },
            tsSearch() {
                let tsStartTime = this.tsStartTime
                let tsEndTime = this.tsEndTime
                let params = {}
                params['startTime'] = tsStartTime
                params['endTime'] = tsEndTime
                getAction('/index/acquisitionOrdersCount', params).then((res) => {
                    this.drawLine4(res.result)
                    this.sjcjslData = [{
                        key: '1',
                        name: '数据采集数量',
                        pg: res.result.sjcjsl[1],
                        pz: res.result.sjcjsl[0]
                    }]
                })
                getAction('/index/synchronizationOrdersCount', params).then((res) => {
                    this.drawLine5(res.result)
                    let result = res.result
                    this.sjtsslData = [{
                        key: '1',
                        name: '国网',
                        pg: result.gwtssl[1],
                        pz: result.gwtssl[0]
                    },
                        {
                            key: '1',
                            name: '南网',
                            pg: result.nwtssl[1],
                            pz: result.nwtssl[0]
                        },
                        {
                            key: '1',
                            name: '其他',
                            pg: result.qttssl[1],
                            pz: result.qttssl[0]
                        }]
                })
            },

            drawLine(result) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '订单类数据汇总',
                        // left: 'center'
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: ['组合电器', '平芝公司', '敞开事业部']
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: result.zhdq, name: '组合电器'},
                                {value: result.pzgs, name: '平芝公司'},
                                {value: result.cksyb, name: '敞开事业部'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ],
                    color: ['#00BFFF', '#F7C639', '#73DEB4', '#7685A2', '#EB7F65', '#006cff', '#60cda0', '#60cda0']
                })
            },
            drawLine2(result) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart2'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '生产采集类数据汇总',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        padding: [0, 0, 0, 50],
                        left: 'right',
                        data: ['烘干间', '外装间', '内装间']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['平芝', '敞开', '组合电器']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '烘干间',
                            type: 'bar',
                            data: result.hgj
                        },
                        {
                            name: '外装间',
                            type: 'bar',
                            data: result.wzj
                        },
                        {
                            name: '内装间',
                            type: 'bar',
                            data: result.nzj
                        }
                    ],
                    color: ['#60cda0', '#EB7F65', '#006cff', '#60cda0', '#60cda0']
                })
            },
            drawLine3(result) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart3'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '试验类数据采集汇总',
                        left: 'left'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        padding: [0, 0, 0, 50],
                        left: 'right',
                        data: ['机械特性及行程特效', '雷电冲击试验', '工频耐受试验', '局部放电']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        top: '30%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['平芝', '敞开', '组合电器']
                    },
                    series: [
                        {
                            name: '机械特性及行程特效',
                            type: 'bar',
                            data: result.jxtx
                        },
                        {
                            name: '雷电冲击试验',
                            type: 'bar',
                            data: result.ldcjsy
                        },
                        {
                            name: '工频耐受试验',
                            type: 'bar',
                            data: result.gpnssy
                        },
                        {
                            name: '局部放电',
                            type: 'bar',
                            data: result.jbfd
                        }
                    ],
                    color: ['#73A0FB', '#73DEB4', '#EB7F65', '#006cff']
                })
            },
            drawLine4(sjcjslData) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart4'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '数据采集数量',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['平芝', '平高'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [{type: 'value'}],
                    series: [
                        {
                            name: '数据采集数量',
                            type: 'bar',
                            barWidth: 60, // 柱图宽度
                            data: sjcjslData.sjcjsl,
                            // data: [8900, 12131],
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        let colorList = ['#00BFFF', '#73A0FB']
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        }
                    ]
                })
            },
            drawLine5(sjtsslData) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart5'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '数据推送数量',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        max: 1000
                    },
                    yAxis: {
                        type: 'category',
                        data: ['平芝', '平高电气']
                    },
                    series: [
                        {
                            name: '国网',
                            type: 'bar',
                            stack: '总量',
                            barWidth: 30,
                            itemStyle: {
                                normal: {
                                    color: '#60cda0',
                                    barBorderRadius: [20, 20, 20, 20]
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            z: 10,
                            data: sjtsslData.gwtssl
                            // data: [60, 120]
                        },
                        {
                            name: '南网',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                normal: {
                                    color: '#73A0FB',
                                    shadowBlur: [0, 0, 0, 10],
                                    shadowColor: '#73A0FB',
                                    barBorderRadius: [20, 20, 20, 20],
                                    shadowOffsetX: -20
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            z: 5,
                            data: sjtsslData.nwtssl
                            // data: [28, 350]
                        },
                        {
                            name: '其他',
                            type: 'bar',
                            stack: '总量',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [20, 20, 20, 20],
                                    color: '#48D1CC',
                                    shadowBlur: [0, 0, 0, 10],
                                    shadowColor: '#48D1CC',
                                    shadowOffsetX: -20
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'insideRight'
                                }
                            },
                            data: sjtsslData.qttssl
                            // data: [47, 220]
                        },
                        {
                            // 灰色背景柱状图
                            type: 'bar',
                            barGap: '-100%',
                            barWidth: 30,
                            itemStyle: {
                                normal: {
                                    color: '#ccc',
                                    barBorderRadius: [20, 20, 20, 20]
                                }
                            },
                            z: -10,
                            // data: ['1000', '1000']
                        }
                    ]
                })
            }
        },
        mounted() {
            getAction('/index/synchronizationOrdersList').then(res => {
                this.ddtbsjList = res.result
            })
            getAction('/index/acquisitionOrdersList').then(res => {
                this.ddtssjList = res.result
            })
            this.tbSearch()
            this.tsSearch()
            this.ScrollUpOne()
            this.ScrollUpTwo()
            setTimeout(() => {
                this.loading = !this.loading
            }, 1000)
        }
    }
</script>

<style lang="scss" scoped>
    .on {
    }

    .off {
        background: rgba(89, 193, 100, 0.49);
    }

    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none
    }

    .message-title:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .message-title {
        *zoom: 1;
        /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

    .message-title {
        border-bottom: 1px solid rgb(144, 136, 136);
    }

    .scroll-wrap {
        height: 300px;
        overflow: hidden;
    }

    .scroll-content {
        position: relative;
        transition: top 1s;
    }

    .scroll-content ul li {
        line-height: 50px;
        text-align: center;
    }

    .scroll-content ul li:hover, .home-list ul li:hover {
        cursor: pointer;
        color: rgb(21, 128, 250);
    }

    .animate-up {
        transition: top 0.5s;
        transform: translateY(0px);
    }
</style>
